<template>
<!--  <div class="healthCharts">-->
<!--    <div class="scatterChart"></div>-->
<!--    <div class="barChart"></div>-->
<!--  </div>-->
  <el-row>
    <el-col :span="12"><div class="scatterChart">
      <health-score-scatter></health-score-scatter>
    </div></el-col>
    <el-col :span="12"><div class="barChart">
      <health-score-bar></health-score-bar>
    </div></el-col>
  </el-row>
</template>

<script>
import HealthScoreScatter from "./comp/HealthScoreScatter";
import HealthScoreBar from "./comp/HealthScoreBar";

export default {
  name: "HealthCharts",
  components: {
    'health-score-scatter': HealthScoreScatter,
    'health-score-bar': HealthScoreBar
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.scatterChart {
  float: left;
  height: 589px;
  width: 834px;
  margin-right: 6px;
  background-color: #13192C;
}
.barChart {
  float: left;
  height: 589px;
  width: 834px;
  margin-left: 6px;
  background-color: #13192C;
}
</style>
